<script setup>
import DemoList from '../components/DemoList.vue'
import { ref } from 'vue';

const text = ref('')
const data = ref([])

let id = 0
data.value = [{
	id: id++,
	text: 'hello'
}, {
	id: id++,
	text: '123'
}]

function add() {
	data.value.push()
}

</script>

<template>
	<div class="box">
		<div class="header">
			<input type="text" v-model="text"><button @click="add">新建</button>
		</div>
		<div class="dataBox">
			<div class="list" v-for="(item, index) in data">
				<div class="default">
					<div class="text">{{ item.text }}</div>
					<div class="handle">
						<button @click="trigger">修改</button>
						<button @click="remove">删除</button>
					</div>
				</div>
				<div class="update">
					<input type="text" v-model="item.text">
					<div class="confirm">
						<button @click="update">确定</button>
						<button @click="cancel">取消</button>
					</div>
				</div>
			</div>

		</div>
		<!-- <DemoList /> -->
	</div>
</template>

<style lang="less" scoped>
.box {
	width: 500px;
	margin: 20px auto;

	.header {
		padding: 10px 40px;
		border: 1px solid #666;
	}

	.dataBox {
		margin-top: 20px;

		.list {
			margin: 5px 0;
			padding: 10px 40px;
			border: 1px solid #666;

			.text {
				padding: 5px 0;
				font-size: 16px;
			}

			button {
				margin-right: 5px;
			}
		}

	}


}
</style>